@url searchImage searchSearchImage;
@url clearImage searchClearImage;
@url clearTouchedImage searchClearTouchedImage;

@if mgwt.css pretty {
	@external mgwt-SearchBox, round, input, clear, clear-active;
	
}

.mgwt-SearchBox {
	height: 44px;
	padding-left: 5px;
	padding-right: 5px;
	position: relative;
}




.mgwt-SearchBox .round {
		background-clip: padding-box;
		background-image: searchImage;
		background-repeat: no-repeat;
		background-position: 10px 50%;
		
		width: 100%;
		height: 24px;
		
		display: block;
		position: relative;
		top: 10px;
		margin: 0px;
		padding: 0px;
}

@if mgwt.os iphone ipad desktop retina {
	.mgwt-SearchBox .round {
		border-bottom-left-radius: 16px 16px;
		border-bottom-right-radius: 16px 16px;
		border-top-left-radius: 16px 16px;
		border-top-right-radius: 16px 16px;
		background-color: white;
	}
}

@if mgwt.os android android_tablet {
	.mgwt-SearchBox .round {
		background-color: transparent;
		
	}
	
}


@if mgwt.os blackberry {
	.mgwt-SearchBox .round {
		background-color: transparent;
	}
}



.mgwt-SearchBox .input {
	border: 0;
	
	
	font-size: 13px;
	padding: 0;
	position: absolute;
	display:block;
	top: 0px;
	left: 25px;
	right: 60px;
	bottom: 0px;
	
}

@if mgwt.os android android_tablet {
	.mgwt-SearchBox .input {
		background-color: transparent;
		color: white;
	}
}

@if user.agent safari {
	.mgwt-SearchBox .input {
		\-webkit-appearance: none;
		\-webkit-user-select: text;
		\-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
}

@if user.agent gecko1_8 {
	.mgwt-SearchBox .input {
		top: 5px;
		\-moz-appearance: none;
		\-moz-user-select: text;
		\-moz-tap-highlight-color: rgba(0,0,0,0);
	}
}



.mgwt-SearchBox .clear {
	position: absolute;
	top: -9px;
	right: 10px;
	width: 40px;
	height: 40px;
	font-size: 13px;
	padding: 0;
	background-image: clearImage;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.mgwt-SearchBox .clear-active {
	background-image: clearTouchedImage;
}